<template>
  <div class="app-container fix-navbar-overlay">
    <NavBar>
      <template #left> 发现 </template>
      <template #right>
        <img
          @click="handleFindIconClick"
          src="/images/icon/find.svg"
          alt=""
        />
        <img
          @click="handlePlusIconClick"
          src="/images/icon/plus.svg"
          alt=""
        />
      </template>
    </NavBar>
    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/pyq.svg" alt="" />
        </template>
        朋友圈
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/scan.svg" alt="" />
        </template>
        扫一扫
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>

      <Cell>
        <template #left>
          <img src="/images/icon/shake.svg" alt="" />
        </template>
        摇一摇
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/look.svg" alt="" />
        </template>
        看一看
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img src="/images/icon/search.svg" alt="" />
        </template>
        搜一搜
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/nearpeo.svg" alt="" />
        </template>
        附近的人
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/shopping.svg" alt="" />
        </template>
        购物
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        <template #left>
          <img src="/images/icon/game.svg" alt="" />
        </template>
        游戏
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup>
      <Cell>
        <template #left>
          <img src="/images/icon/applet.svg" alt="" />
        </template>
        小程序
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>
  </div>
</template>

<script>
import NavBar from "src/components/NavBar.vue"
export default {
  components: {
    NavBar,
  },
  methods: {
    handleFindIconClick() {
      console.log("find icon click")
    },
    handlePlusIconClick() {
      console.log("plus icon click")
    },
  },
}
</script>

<style lang="scss" scoped>
.left-box img {
  margin-top: 6px;
}
</style>
